<template>
  <a-drawer
    :visible="visible"
    :title="title"
    placement="right"
    :footer-style="{ textAlign: 'center' }"
    width="600"
    @close="cancelClick"
  >
    <template v-if="!loading">
    <a-form layout="vertical">
      <a-form-item label="角色名称" v-bind="validateInfos.name">
        <a-input
          v-model:value="modelRef.name"
          placeholder="请输入角色名称"
          allowClear
        />
      </a-form-item>
      <a-form-item label="状态" v-bind="validateInfos.status">
        <a-switch
          v-model:checked="modelRef.status"
          checked-children="启用"
          un-checked-children="禁用"
        />
      </a-form-item>
      <a-form-item label="选择权限" v-bind="validateInfos.checkedKeys">
        <a-tree
          v-model:selectedKeys="modelRef.selectedKeys"
          v-model:expandedKeys="modelRef.expandedKeys"
          v-model:checkedKeys="modelRef.checkedKeys"
          checkable
          :tree-data="treeData"
        >
        </a-tree>
      </a-form-item>
    </a-form>
    </template>
    <template v-else>
      <a-spin :spinning="loading" class="loading-wrapper"></a-spin>
    </template>

    <template #footer>
      <a-button
        style="
          margin-right: 8px;
          width: 200px;
          border: 1px solid #d9d9d9;
          color: #000;
          border-radius: 5px;
        "
        @click="cancelClick"
        >取消</a-button
      >
      <a-button
        type="primary"
        style="
          width: 200px;
          border: none;
          border-radius: 5px;
        "
        @click="confirmClick"
        >保存</a-button
      >
    </template>
 
 

 
  </a-drawer>
</template>

<script>
import { defineComponent, reactive, toRefs, computed ,watch} from "vue";
import { Form } from "ant-design-vue";
const useForm = Form.useForm;
import routes from "@/router/router.config.js";
import _ from "lodash";
import request from "@/common/utils/request";
import { useRoute, useRouter } from "vue-router";
import { Modal,message } from "ant-design-vue";
export default defineComponent({
  name: "StaffDrawer",
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
      default: "",
    },
  },
  setup(props, { emit }) {
    const route = useRoute();
    const state = reactive({
      loading:false,
      count: 0,
      treeData:[],
      roleOptions: [
        {
          value: "1",
          label: "超级管理员",
        },
      ],
      
    });
    let currentRoutePath  = route.path
    // 不同路由返回对应路由配置文件中的路由配置数据
    let routeName  =  route.path.includes('workShotstack')?'workShotstack':'SocialMedia'
    // 获取路由列表
    let workShotstack = routes.find((item) => item.name == routeName)
    let workShotstackRoutes = _.cloneDeep(workShotstack?workShotstack.children:[])
   
    let getFilterHideRoutes = (menuItems)=>{
          return menuItems.filter(menu => {
        // 如果当前菜单项被隐藏(账号中心除外)，则返回 false
        if (menu.meta.hidden&&menu.meta.title!='账号中心') {
          return false;
        }

        // 如果有子菜单项，递归过滤子菜单项
        if (menu.children && menu.children.length > 0) {
          menu.children = getFilterHideRoutes(menu.children);
        }

        // 返回 true，表示当前菜单项是可见的
        return true;
      });
    }
    // 获取过滤hidden的路由列表
    let filterHideRoutes = getFilterHideRoutes(workShotstackRoutes)
    const formatTree = (data)=>{
    return data.map(item=>{
        return {
         key:item.name,
         title:item.meta.title,
         children:item.children&&item.children.length?formatTree(item.children):[],
        }
      })
    }
    // 格式化路由tree
    let shotStackRoutes = formatTree(filterHideRoutes)
    
    state.treeData = shotStackRoutes

    const modelRef = reactive({
      name: "",
      status: false,
      selectedKeys: [],
      expandedKeys: [],
      checkedKeys: [],
    });
    const rulesRef = reactive({
      name: [
        {
          required: true,
          message: "请输入用户名",
        },
      ],
      checkedKeys: [
        {
          required: true,
          message: "请选择权限",
        },
      ],
    });
    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );

    const cancelClick = () => {
      resetFields();
      emit("onCancel");
    };

    const confirmClick = () => {
      validate().then(() => {
        addRole()
        resetFields();
      });
    };

    const title = computed(() => {
      return props.id ? "编辑角色" : "添加角色";
    });
   
   
  const getDetail = ()=>{
    state.loading = true
    request
        .get("/work_ai", "/user/team/role/get", {
          id:props.id,
        
        })
        .then((res) => {
          modelRef.name = res.result.name
          modelRef.status = res.result.status==1?true:false
          modelRef.checkedKeys = res.result.data
          state.loading = false
        });
  }
  const addRole = ()=>{
      let url = '/user/team/role/add'
      let method = 'post'
      let params = {
        status:modelRef.status?1:0,
        data:modelRef.checkedKeys,
        name:modelRef.name,
      }
     
     if(props.id ){
      params.id = props.id
      url = '/user/team/role/update'
      method = 'put'
     }
      request[method]("/work_ai", url,params)
            .then((res) => {
              message.success("操作成功");
              emit('onConfirmRole')
        });
    }
    watch(()=>props.visible,(visible)=>{
      if(visible&&props.id){
        getDetail()
      }
    })
    return {
      ...toRefs(state),
      title,
      cancelClick,
      confirmClick,
      validateInfos,
      resetFields,
      modelRef,
     
    };
  },
});
</script>

<style lang="less" scoped>
.loading-wrapper{
  height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
